<template>
  <div>
    <el-table
      :data="tableData"
      border
      height="250"
      style="width: 100%">
      <!--定义列
          label="日期"：列表头名称、
          width="180"：列宽度
          prop="date" ：填充列属性名
      -->
      <el-table-column
        fixed
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small">删除</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: '_02_table',
  data () {
    return {
      tableData:[]
    }
  },
  methods:{
    getDepartments(){
      this.tableData = [{
        date: '2020-05-20',
        name: '芜湖',
        address: '是大大大 阿达大大'
      }, {
        date: '2020-05-20',
        name: '芜湖',
        address: '是大大大 阿达大大'
      }, {
        date: '2020-05-20',
        name: '芜湖',
        address: '是大大大 阿达大大'
      }, {
        date: '2020-05-20',
        name: '芜湖',
        address: '是大大大 阿达大大'
      },{
        date: '2020-05-20',
        name: '芜湖',
        address: '是大大大 阿达大大'
      }, {
        date: '2020-05-20',
        name: '芜湖',
        address: '是大大大 阿达大大'
      }
      ]
    }
  },
  mounted(){
    this.getDepartments();
  }
}
</script>

